<template>
	<view class="input-custom">
		<view class="body" @click="open">
			<text class="title">{{name}}</text>
			<view  class="right-field">
				<text v-if="valueText" class="text-label">{{valueText}}</text>
				<text v-else class="empty-text">暂无</text>
				<image src="/static/personal/right.png"></image>
			</view>
		</view>
		
		<uni-popup ref="popup" type="bottom">
			<view class="pop-box">
				<view class="pop-title">修改{{name}}</view>
				<textarea  class="my-textarea" v-model="inputValue" focus v-if="inputType=='textarea'"/>
				<input v-else  class="my-input" :type="inputType" v-model="inputValue" :placeholder="name" >
				
				<view class="pop-operate flex-col-between">
					<button class="form-btn" @click="handleFix">确定修改</button>
					<button class="cancle" @click="handleCancle">取消</button>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupTime" type="bottom">
			<view class="pop-box">
				<view class="pop-title">修改{{name}}</view>
				
				<input class="my-input" type="text" v-model="inputValue" :placeholder="name" disabled @click="()=>timeShow = true">
				
				<view class="pop-operate flex-col-between">
					<button class="form-btn" @click="handleFix">确定修改</button>
					<button class="cancle" @click="handleClear">确定清除</button>
					<button class="cancle" @click="handleCancle">取消</button>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupMultiSelect" type="bottom">
			<view class="pop-box">
				<view class="pop-title">修改{{name}}(可多选)</view>
				
				<view class="select-item-body select-item-body-3">
					<view v-for="(item,index) in multiSelectList" :key="index" class="text-body" :class="[activeHandle(item)?'active-style':'']" @click="selectSearch(item)">
						<text>{{item.text}}</text>
					</view>
				</view>
				
				<view class="pop-operate flex-col-between">
					<button class="form-btn" @click="handleMultiSelectFix">确定修改</button>
					<button class="cancle" @click="handleCancle">取消</button>
				</view>
			</view>
		</uni-popup>
		<tn-select safeAreaInsetBottom v-model="selectShow" mode="single" :title="selectTitle" :list="actionSheetList" @confirm="selectConfirm" :labelName="selectText" :valueName="selectValue"></tn-select>
		<tn-picker safeAreaInsetBottom mode="time" v-model="timeShow" :params="params" @confirm="timeConfirm"></tn-picker>
		<tn-action-sheet safeAreaInsetBottom :list="actionSheetList" v-model="show" @click="actionSheetCallback" safeAreaInsetBottom></tn-action-sheet>
	</view>
</template>

<script>
	export default{
		name:'inputCustom',
		props:{
			name:{
				type:String,
				required:true,
			},
			inputType:{
				type:String,
				default:'text'
			},
			model:{
				type:String|Number|Object,
			},
			options:{
				type:Array,
				default:[]
			},
			dicCode:{
				type:String,
			},
			textLabel:{
				type:String,
				default:'text'
			},
			valueLabel:{
				type:String,
				default:'value'
			}
		},
		data(){
			return{
				selectTitle:'',
				selectText:'',
				selectValue:'',
				selectShow:false,
				valueText:'',
				actionSheetList:[],
				multiSelectList:[],
				show:false,
				inputValue:'',
				timeShow:false,
				params: {
				  year: true,
				  month: true,
				  day: true,
				  hour: false,
				  minute: false,
				  second: false
				},
			}
		},
		watch:{
			'model':{
				handler(cu,old){
					console.log('meiyoushuju2222',this.model)
					if(this.inputType == 'text'|'number'|'textarea') {
						this.valueText = this.model;
					} else
					if(this.inputType == 'select'||this.inputType =='picker-select') {
						//单选和数据量比较多的选择
						this.getValueText();
					} else if(this.inputType == 'multi-select'){
						this.getValueText();
					} else {
						this.valueText = this.model;
					}
				},
				deep:true,
				immediate:true,
			},
			'options':{
				handler(){
					if(this.options){
						if(this.inputType == 'select'||this.inputType =='picker-select'){
							this.actionSheetList = this.options;
							
						} else {
							this.multiSelectList = this.options;
						}
						this.getValueText();
						
					}
				},
				immediate:true
			}
		},
		created(){
		
			if(this.dicCode) {
				this.getDicdata();
			}
			
		},
		methods:{
			getValueText(){
				
				if(this.model){
					if(this.inputType == 'select'||this.inputType =='picker-select'){
						if(typeof this.model == 'object'){
							this.valueText = this.model[this.textLabel];
						} else if(this.actionSheetList.length > 0){//value值
							let cur = this.actionSheetList.find((el) => el[this.valueLabel] == this.model);
							this.valueText = cur&&cur[this.textLabel]||this.model;
						}
					} else if(this.inputType == 'multi-select'){
						//todo
						if(Array.isArray(this.model)){
							let text = '';
							this.model.forEach((el) => {
								if(text){
									text += '/'+el[this.textLabel];
								} else{
									text = el[this.textLabel]
								}
							})
							this.valueText = text;
						} else if(this.multiSelectList.length > 0){//value值
							//一般是逗号隔开之类的
							let valueList = this.model.spilt(',');
							let text = '';
							valueList.forEach((el) => {
								let cur = this.multiSelectList.find((el) => el[this.valueLabel] == el);
								if(text){
									text += '/'+cur[this.textLabel];
								} else{
									text = cur[this.textLabel]
								}
							})
							this.valueText = text;
							
						}
					}
					
				} else{
					this.valueText = this.model;
				}
				
			},
			activeHandle(item){
				return item.selected;
			},
			selectSearch(item){
				this.$set(item,'selected',!item.selected)
				
			},
			getDicdata(){
				this.$http.get('/api/dictionary/data',{title:this.dicCode}).then((res) => {
					if(res.data.status == 200) {
						
						if(this.inputType == 'select'||this.inputType =='picker-select'){
							this.actionSheetList = res.data.data;
							
						} else {
							this.multiSelectList = res.data.data;
						}
						this.getValueText();
					}
				})
			},
			open(){
				if(this.inputType == 'select'){
					this.show = true;
				} else if(this.inputType == 'multi-select'){
					this.$refs.popupMultiSelect.open();
				} else if(this.inputType == 'time'){
					this.inputValue = this.model;
					this.$refs.popupTime.open();
				} else if(this.inputType =='picker-select'){
					this.selectTitle = '请选择'+this.name;
					this.selectText = this.textLabel;
					this.selectValue = this.valueLabel;
					this.selectShow = true;
				} else {
					this.inputValue = this.model;
				
					this.$refs.popup.open();
				}
				
			},
			selectConfirm(e){
				console.log('333',e)
				this.valueText = e[0].label;
				this.$emit('inputComplete', e[0])
			},
			actionSheetCallback(index){
				
				this.valueText = this.actionSheetList[index].text;
				this.$emit('inputComplete',this.actionSheetList[index])
			},
			timeConfirm(data){
				this.inputValue = data.year+'-'+data.month+'-'+data.day;
			},
			handleMultiSelectFix(){
				this.$refs.popupMultiSelect.close();
				let selectList = [];
				let text = ''
				this.multiSelectList.forEach((el) =>{
					if(el.selected){
						selectList.push(el);
						if(text){
							text += '/'+el.text;
						} else{
							text += el.text;
						}
						
						
					}
				})
				this.valueText = text;
				console.log('bbbb',text,selectList)
				this.$emit('inputComplete',selectList)
			},
			handleFix(){
				this.$refs.popup.close();
				this.$refs.popupTime.close();
				this.valueText = this.inputValue;
				this.$emit('inputComplete',this.inputValue)
			},
			handleClear(){
				this.inputValue = '';
				this.valueText = this.inputValue;
				this.$emit('inputComplete',this.inputValue)
				this.$refs.popupTime.close();
			},
			handleCancle(){
				this.$refs.popupTime.close();
				this.$refs.popup.close();
				this.$refs.popupMultiSelect.close();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.input-custom{
		color:#000000;
		font-size: 28rpx;
		.body{
			display: flex;
			justify-content: space-between;
			.title{
				flex-shrink: 0;
				margin-right: 100rpx;
			}
		}
		
		.right-field{
			display: flex;
			align-items: center;
			.text-label{
				line-height: 28rpx;
				flex:1;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}
			.empty-text{
				color:#BBBBBB;
			}
			image{
				margin-left: 20rpx;
				width: 10rpx;
				height: 20rpx;
			}
		}
		.pop-box {
			width: 100%;
			// height: 380rpx;
			background: #FFFFFF;
			border-radius: 10rpx 10rpx 0 0 ;
			padding: 60rpx 70rpx 0;
			.pop-title {
				margin-bottom: 60rpx;
				font-size: 32rpx;
				line-height: 32rpx;
				font-weight: $Semibold;
				color: #525252;
				text-align: center;
			}
			textarea{
				--textarea-height: 202rpx;
			}
			.pop-operate {
				--btn-width:200rpx;
				--btn-height:56rpx;
				margin-top: 40rpx;
				button{
					margin-bottom: 60rpx;
				}
				.cancle {
					width: 200rpx;
					height: 56rpx;
					line-height: 56rpx;
					text-align: center;
					font-size: 32rpx;
					border-radius: 90rpx;
					border: 2rpx solid #7D7D7D;
					color:#7D7D7D;
					background: #FFFFFF;
					box-sizing: border-box;
					cursor: pointer;
				}
			}
			// .mulit-select{
				.select-item-body{
					display: grid;
					grid-row-gap: 30rpx;
				}
				.select-item-body-3{
					grid-column-gap: 16rpx;
					grid-template-columns: auto auto auto;
				}
				.select-item-body-4{
					grid-column-gap: 20rpx;
					grid-template-columns: auto auto auto auto;
				}
				.text-body{
					text-align: center;
					line-height: 72rpx;
					font-size: 24rpx;
					color:#6F6F6F;
					background-color: #F7F8FC;
					border-radius: 10rpx;
				}
				.active-style{
					border: 2rpx solid #FFA457;
					background-color: #FDF1E5;
					color: #EE8731;
				}
			// }
		}
	}
</style>